<template>
  <div id="ImportEmployee">
    <el-dialog title="花名册导入" width="600px" :visible.sync="ImportEmployeeDialog" :before-close="close">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全覆盖式导入" name="1">
          <div class="container ">
            <el-upload :http-request="uploadSectionFile" :show-file-list="false" style="display: inline; margin-left: 5px" class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/">
              <el-button size="medium" round type="primary">导入</el-button>
            </el-upload>
            <div class="selected download" @click="downLoadTemplate">下载模板</div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="分列式导入" name="2">
          <div class="box">
            <div class="title">第一步：选择导入列</div>
            <div class="container">
              <el-button type="primary" @click="onSelectColumn">选择列</el-button>
              <div v-if="checkList.length" class="selected">已选{{checkList.length}}列</div>
            </div>
            <div class="download mb-20" @click="downLoadTemplate">下载模板</div>
          </div>
          <div class="box">
            <div class="title">第二步：导入信息</div>
            <el-upload :http-request="uploadSectionFile" :show-file-list="false" style="display: inline; margin-left: 5px" class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/">
              <el-button size="medium" round type="primary">导入</el-button>
            </el-upload>
          </div>
        </el-tab-pane>
      </el-tabs>
      <el-dialog width="450px" title="选择导入列" :visible.sync="isDialog" :before-close="columnClose" append-to-body>
        <el-checkbox-group v-model="checkList" style="max-height:400px;overflow:auto;">
          <el-checkbox style="display:block;margin-bottom:8px" v-for="(item,index) in list" :key="index" :label="item.key">{{item.value}}</el-checkbox>
        </el-checkbox-group>
        <span slot="footer" class="dialog-footer">
          <el-button @click="columnClose">取 消</el-button>
          <el-button type="primary" @click="columnConfirm">确 定</el-button>
        </span>
      </el-dialog>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="close">确 定</el-button>
      </span> -->
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    ImportEmployeeDialog: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    ImportEmployeeDialog: {
      handler(newVal) {
        newVal && this.getCustomHeader();
      },
    },
  },
  data() {
    return {
      activeName: '1',
      isDialog: false,
      checkList: [], //选择的列
      list: [], //所有列
    };
  },
  methods: {
    async getCustomHeader() {
      const { data: { data: { displayColumns, notDisplayColumns }, }, } = await this.$api.employeeApi.GetColumnStyleSetting();
      this.displayColumns = displayColumns.sort((a, b) => a.index - b.index), this.notDisplayColumns = notDisplayColumns.sort((a, b) => a.index - b.index);
    },
    columnConfirm() {
      this.isDialog = false;
    },
    async onSelectColumn() { //选择列
      this.isDialog = true;
      const { data } = await this.$api.optionsManage.GetPartImportColunms();
      this.list = data.data;
    },
    columnClose() { //关闭选择列
      this.isDialog = false;
      this.checkList = [];
    },
    async uploadSectionFile(params) {//导入
      const { file } = params;
      const form = new FormData();
      form.append("file", file);
      // activeName 1 全覆盖式导入 2 分列式导入
      await this.$api.optionsManage[this.activeName == 1 ? 'Import' : 'PartImport'](form);
    },
    async downLoadTemplate() {//下载模板
      const download = ({ data, fileName }) => {
        const blob = new Blob([data], { type: "application/vnd.ms-excel" });
        const blobUrl = URL.createObjectURL(blob);
        const a = document.createElement("a");
        a.href = blobUrl;
        a.download = `${fileName}.xlsx`;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(blobUrl);
      };
      // activeName 1 全覆盖式导入 2 分列式导入
      const { data } = await this.$api.optionsManage[this.activeName == 1 ? 'GetImportTemplate' : 'GetPartImportTemplate'](this.activeName == 1 ? {} : this.checkList);
      download({ data, fileName: "员工花名册导入模板" });
    },
    handleClick() {

    },
    close() {
      this.$emit("update:ImportEmployeeDialog", false);
    },

  },
};
</script>

<style lang="less" scoped>
#ImportEmployee {
  :deep( .el-checkbox-group) {
    display: flex;
    flex-direction: column;
  }
  :deep( .el-dialog__body) {
    padding-top: 0;
    padding-bottom: 20px;
  }
  :deep( .upload-demo) {
    margin: 0 !important;
  }
  .el-button {
    margin: 0;
  }
  .mb-20 {
    margin-bottom: 20px;
  }

  .container {
    display: flex;
    // align-content: flex-end;
    margin-bottom: 5px;
    align-items: flex-end;
    .selected {
      margin-left: 8px;
    }
  }
  .download {
    text-decoration: underline;
    color: #179bd4;
    display: inline-block;
    cursor: pointer;
  }
  .box {
    .title {
      margin-bottom: 10px;
    }
  }
}
</style>
